<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
     <script src="js/vue.js"></script>
     <!-- 引入elementui -->
      <!-- 样式 -->
    <link rel="stylesheet" href="element-ui-2.13.0/lib//theme-chalk/index.css">   
       <!-- 组件库 -->
    <script src="element-ui-2.13.0/lib/index.js"></script>    
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">

        <template>
            <!-- 绑定的数据是dataList -->
            <el-table
              :data="dataList"
              style="width: 100%">
              <el-table-column
               
                label="序号"
                width="50">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column
                prop="sname"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="sex"
                label="性别"
                width="50">
              </el-table-column>
            <el-table-column
                label="生日"
                width="180">
                <!-- slot-scope="scope" 作用域插槽，将当前行的信息组件赋值给scope  scope.row代表当前行的数据  -->
                <template slot-scope="scope">
                    {{scope.row.sbir.substring(0,10)}}
                </template>

            </el-table-column>
            <el-table-column
                prop="hobby"
                label="爱好"
                width="180">
            </el-table-column>
            <el-table-column
                
                label="大头贴"
                >
                <template slot-scope="scope">
                    <img :src=`${picUrl}${scope.row.photo}` width="50px" alt="">
                </template>

            </el-table-column>
            </el-table>
          </template>

        <template>
           
            <div class="block">
              
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 4, 5, 6]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </template>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        methods: {
            //条数改变触发的钩子
            handleSizeChange(val) {
                //val代表改变的条数
                //将val赋值给data中的变量，调用分页查询的方法
                this.pageSize = val
                this.findAll()
            },
            //当前页改变触发的钩子
            handleCurrentChange(val) {
                //val代表改变的当前页
                //将val赋值给data中的变量，调用分页查询的方法
                this.currentPage = val
                this.findAll()
            },
            //发送请求进行分页查询
            findAll() {
                // 当前页、mark、每页显示的条数
                //需要后台返回什么数据   当前页的学生信息，总条数
                let params = new URLSearchParams()
                params.append("mark","pageQuery")
                params.append("currentPage",this.currentPage)
                params.append("pageSize",this.pageSize)
                axios({
                    method:'post',
                    url: this.url,
                    params:params,
                    responseType: 'json'
                }).then(resp => {
                    //赋值操作
                    this.dataList = resp.data.dataList //赋值数据
                    this.total = resp.data.total  //赋值总条数
                }).catch(_ => {
                    this.$message.error(`分页查询出现异常.......`)
                })
            }



        },
        data: {
           
            dataList:[],
            currentPage: 1,
            pageSize: 3,
            total: 0,
            url:"http://localhost:8080/day20/student",
            picUrl:`http://localhost:8080/studentPic/`
           
        },
        created() {
            this.findAll()
        }
    })
</script>
